<template>
  <div>
    <p>管理员信息</p>

    <p>管理员ID：{{ id }}</p>
    <p>帐号: {{ acc }}</p>
    <p>用户组: {{ usergroup }}</p>
    <p>创建时间: {{ ctime }}</p>
    <p>
      管理员头像：<br><br> 
      <!-- <img :src="userimg" alt=""> -->
      <el-upload class="avatar-uploader"  action="http://127.0.0.1:5000/users/avatar_upload" :data="{id : myid}"
        :show-file-list="false" :on-success="handleAvatarSuccess"  >
        <img v-if="userimg" :src="userimg" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </p>
  </div>
</template>

<script>
import { accountinfo } from "@/apis/users";
import { getYYYYMMDDHHMMSS } from "@/utils/utils";
export default {
  data() {
    return {
      id: localStorage.getItem("userId"),
      acc: "",
      usergroup: "",
      ctime: "",
      userimg: "",
    };
  },
  methods:{
      //头像上传成功
      handleAvatarSuccess(res,file){
        //   console.log(res);
          if(res.code==0){
              this.$bus.emit('herderImgUpdate',res)
              this.userimg = URL.createObjectURL(file.raw);
               this.$message({
                message: '系统提示: 头像上传成功 (╹ڡ╹ )',
                type: 'success'
             });
          }
      }
  },
  computed:{
      myid(){
          return localStorage.userId
      }
  },
  created() {
    accountinfo({ id: this.id }).then((res) => {
      let data = res.data.accountInfo;
      data.ctime = getYYYYMMDDHHMMSS(data.ctime);
      this.acc = data.account;
      this.usergroup = data.userGroup;
      this.ctime = data.ctime;
      this.userimg = data.imgUrl;
    });

    this.$bus.emit('subTitle','个人中心>')



  },
};
</script>

<style lang="less" scoped>
p {
  padding: 20px 10px;
  border-bottom: 1px solid #f1f1f1;
}
p:first-child {
  padding-top: 0;
  border-bottom: 1px dashed #f1f1f1;
  font-size: 18px;
}
p:last-child {
  border: 0 solid #000;
  img {
    width: 120px;
    height: 120px;
    vertical-align: middle;
    border: 1px dashed #FFCC00;
    border-radius: 6px;
  }
}

 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>